<template>
  <!-- 逻辑：在这个页面获取数据，通过props传参的方式给各个组件传参 -->
  <div class="report">
    <tableTool>
      <div slot="export">
        <el-button type="primary" @click="excelExport">导出</el-button>
      </div>
      <div class="tool-form" slot="form">
        <div class="input-group">
          <span class="lable">机构名称：</span>
          <el-input placeholder="请输入" v-model="filterOrgName" />
        </div>
        <el-button type="primary" @click="onSearch">搜索</el-button>
        <el-button type="success" @click="onReset">重置</el-button>
      </div>
    </tableTool>
    <customTable :list="list" :combined="combined">
      <template v-slot:title>
        <tr>
          <th colspan="2">{{ orgName }}</th>
        </tr>
        <tr>
          <th>机构名称</th>
          <th>数量</th>
        </tr>
      </template>
      <template #body="{ list }">
        <tr v-for="item in list" :key="item.id">
          <td @click="toJump(item.orgId, item.orgName)" class="link">
            {{ item.orgName }}
          </td>
          <td>{{ item.quantity }}</td>
        </tr>
      </template>
      <template #empty>
        <tr>
          <td colspan="2" class="empty">暂无数据</td>
        </tr>
      </template>
      <template #footer="{ combined }">
        <tr>
          <td>合计</td>
          <td>{{ combined.quantity }}</td>
        </tr>
      </template>
    </customTable>
    <pagination @onCurrentChange="handleCurrentChange" :total="page.total"></pagination>
  </div>
</template>
<script>
import tableTool from "../components/tableTool.vue";
import customTable from "../components/customTable.vue";
import pagination from "../components/pagination.vue";
import request from "@/api/comprehensiveReport/equipmentManagement.js";
import { combinedFn } from "@/pages/comprehensiveReport/equipmentManagement/mixin";

export default {
  name: "specialEquipmentStatisticsTableFiliale",
  components: { tableTool, customTable, pagination },
  data () {
    return {
      list: [],
      orgName: "",
      page: {
        total: 0,
        currentPage: 1,
        limit: 10,
      },
      combined: {},
      headers: {
        机构名称: "orgName",
        数量: "quantity",
      },
      filterOrgName: ''
    };
  },
  created () {
    this.getList();
  },
  methods: {
    onSearch () {
      this.getList()
    },
    onReset () {
      this.filterOrgName = ''
      this.getList()
    },
    async getList () {
      const orgId = this.$route.query.orgId || localStorage.orgId;
      this.orgName = this.$route.query.orgName || this.$store.state.userInfo.orgInfo.orgName;
      const data = await request.getEquipmentSpecial({
        page: this.page.currentPage,
        limit: this.page.limit,
        orgId,
        type: 2, // 集团和分子公司需要传参，集团1，分子公司2
        filterOrgName: this.filterOrgName
      });
      console.log("发送请求，获取数据", data);
      if (data.list.length == 0) {
        this.list = []
        this.combined = {}
        this.page.total = 0
        return;
      }
      this.page.total = data.totalCount;
      const { list, combined } = combinedFn(Object.values(this.headers).slice(1), data.list, ["quantity"]);
      this.list = list;
      this.combined = combined;
    },
    handleCurrentChange (currentPage) {
      this.page.currentPage = currentPage;
      this.getList();
    },
    toJump (orgId, orgName) {
      this.$router.push({
        path: "/specialEquipmentStatisticsTableProject",
        query: {
          orgId,
          orgName,
        },
      });
    },
    excelExport () {
      const multiHeader = [[this.orgName, ""]];
      const merges = ["A1:B1"];
      import("@/utils/Export2Excel.js").then(async (excel) => {
        const orgId = this.$route.query.orgId || localStorage.orgId;
        const { list } = await request.getEquipmentSpecial({
          page: 1,
          limit: this.page.total,
          orgId,
        });
        const data = this.formatJson(this.headers, list);
        const { combined } = combinedFn(Object.values(this.headers).slice(1), list, ["quantity"]);
        data.push(["合计", ...Object.values(combined)]);
        excel.export_json_to_excel({
          header: Object.keys(this.headers),
          data,
          filename: `设备管理-特种设备统计表-${this.orgName}`,
          autoWidth: true,
          bookType: "xlsx",
          multiHeader,
          merges,
        });
      });
    },
    formatJson (headers, list) {
      return list.map((item) => {
        return Object.values(headers).map((value) => {
          return item[value];
        });
      });
    },
  },
};
</script>
<style lang="scss">

</style>
